<template>
  <view class="broker-container">
    <view class="fz-14 linh-20" style="color: #969799">
      供需服务专员主要负责供需的管理和撮合对接
    </view>
    <view class="br-8 p-8 disFlxAC gap-12 mt-12" style="background-color: #f2f3f5">
      <view>
        <TImage
          error-img-type="person"
          :src="avatar"
          width="96rpx"
          height="96rpx"
          border-radius="8rpx"
        ></TImage>
      </view>
      <view class="flex-1 disFlexCol justify-between">
        <view class="disFlxAC gap-4">
          <text class="fz-16 linh-24 ov-1">{{ userName }}</text>
          <CustomTag
            v-if="roleName"
            :text="roleName"
            backgroundColor="#D0F7FF"
            color="#2878FF"
          ></CustomTag>
        </view>
        <view>
          <text class="fz-12 linh-16">{{ phone }}</text>
        </view>
      </view>
      <TButton
        text="更换"
        type="none"
        :customStyle="{
          color: '#2878FF',
          border: '1px solid #2878FF',
        }"
        custom-class="h-32 linh-32 br-16"
        @click="handleChangeBroker"
      />
    </view>
    <FormAdministrator ref="formAdministratorRef" @change="change"></FormAdministrator>
  </view>
</template>
<script setup lang="ts">
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import TImage from '@/components/TImage/index.vue';
  import CustomTag from '@/components/CustomTag/index.vue';
  import FormAdministrator from '../FormAdministrator.vue';
  import { onMounted, ref, watch } from 'vue';
  import type { SysUserResult } from '@/api/serviceForm/types';
  const props = defineProps({
    sysUserId: {
      type: Number,
      default: undefined,
    },
    avatar: {
      type: String,
      default: '',
    },
    userName: {
      type: String,
      default: '',
    },
    roleName: {
      type: String,
      default: '',
    },
    phone: {
      type: String,
      default: '',
    },
  });

  const emits = defineEmits([
    'update:sysUserId',
    'update:avatar',
    'update:userName',
    'update:roleName',
    'update:phone',
  ]);

  const formAdministratorRef = ref<InstanceType<typeof FormAdministrator>>();
  const handleChangeBroker = () => {
    formAdministratorRef.value?.open();
  };

  const change = (v: SysUserResult) => {
    emits('update:sysUserId', v.systemUserId);
    emits('update:avatar', v.avatar);
    emits('update:userName', v.userName);
    emits('update:roleName', v.roleName);
    emits('update:phone', v.phone);
  };
</script>
<style lang="scss" scoped></style>
